<template>
	<div class="mydialog">
		<el-dialog class="comDetailDialogDiv" :title="dialogTitle" :visible.sync="tabsDialogParams.dialogVisible"
			width="80%" @opened="onOpened()" :before-close="dialogClose">
			<div style="width: 100%;height: 70vh;overflow-y: auto;">
				<el-tabs v-model="currTab" tab-position="left" @tab-click="changeTab">

					<el-tab-pane name="1" label="进出记录">
						<div class="tabPanelDiv">
							<el-table v-loading="loadingJCJL" element-loading-text="数据加载中..." :data="dataTableListJCJL"
								style="width: 100%;flex: 1;color: white;">
								<el-table-column label="序号" align="center" type="index" width="50px"></el-table-column>
								<el-table-column label="车牌号" align="center" prop="plateNo"
								v-if="true"></el-table-column>
								<el-table-column label="企业名称" align="center" prop="regionName"></el-table-column>
								<el-table-column label="进场时间" align="center" prop="inTime"></el-table-column>
								<el-table-column label="出场时间" align="center" prop="outTime"></el-table-column>

								<el-table-column label="排放类型" align="center" prop="standardEmission"></el-table-column>
								

							</el-table>

							<el-pagination @size-change="handleSizeChangeJCJL" @current-change="handleCurrentChangeJCJL"
								:current-page="pageNumJCJL" :page-sizes="[5, 10, 25, 50]" :page-size="pageSizeJCJL"
								:background="true" layout="total, sizes, prev, pager, next, jumper" :total="totalJCJL"
								style="height: 60px;padding-top: 20px;text-align: right;">
							</el-pagination>
						</div>
					</el-tab-pane>
					<el-tab-pane name="2" label="统计分析">
						<div class="tabPanelDiv">
							<div class="detailLine">
								<div style="padding-left: 1vw;">
									<span style=" height: 3px;color: #00e5e5;">总上报记录：</span><span
										style="color: #ffaa00;">{{
											totalReport }} 万条</span>
								</div>
								<div style="margin-left: 30px; height: 3px;color: #00e5e5;">
									<span>总上报率：</span><span style="color: #ffaa00;">{{ totalReportPer }} %</span>
								</div>
							</div>
							<div class="detailLine">
								<div style="padding-left: 1vw;">
									<span style=" height: 3px;color: #00e5e5;">管控要求：新能源占比：</span><span
										style="color: #ffaa00;">{{ requirePer }} %</span>
								</div>
								<div style="margin-left: 30px; height: 3px;color: #00e5e5;">
									<span>实际占比：</span><span style="color: #ffaa00;">{{ realPer }} %</span>
								</div>

								<div v-if="!isOK" class="detailBlock" style="width: 3vw;">
									<el-image :src="alertImage"></el-image>
								</div>

								<div class="detailBlock">
									<el-date-picker v-model="subCentusTime" type="datetimerange" align="right"
										start-placeholder="开始时间" end-placeholder="结束时间" style="margin-left: 3vw;"
										:default-time="['00:00:00', '23:59:59']">
									</el-date-picker>
									<el-button type="primary" style="margin-left: 1vw;"
										@click="setSubCentusData()">查询</el-button>
								</div>
							</div>
							<div style="width: 100%;height: 65vh;display: flex;flex-direction: column;">
								<div style="width: 100%;height: 50%;">
									<div id="dateRangeBarDiv" style="width: 100%;height: 100%;"></div>
								</div>
								<div style="width: 100%;height: 50%;display: flex;">
									<div id="subStageDataDiv" style="width: 50%;height: 100%;"></div>
									<div id="warningTypeDiv" style="width: 50%;height: 100%;"></div>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane name="3" label="告警记录">
						<div class="tabPanelDiv">
							<el-table v-loading="loadingGJJL" element-loading-text="数据加载中..." :data="dataTableListGJJL"
								style="width: 100%;flex: 1;">
								<el-table-column label="序号" align="center" type="index" width="50px"></el-table-column>
								<el-table-column label="ID" align="center" prop="id" width="50px"
									v-if="false"></el-table-column>
								<el-table-column label="告警记录" align="center" prop="name"></el-table-column>
								<el-table-column label="告警记录" align="center" prop="company"></el-table-column>
								<el-table-column label="告警记录" align="center" prop="principalName"></el-table-column>
								<el-table-column label="告警记录" align="center" prop="principalPhone"></el-table-column>
								<el-table-column label="说明描述" align="center" prop="memo"
									width="500px"></el-table-column>

							</el-table>

							<el-pagination @size-change="handleSizeChangeGJJL" @current-change="handleCurrentChangeGJJL"
								:current-page="pageNumGJJL" :page-sizes="[5, 10, 25, 50]" :page-size="pageSizeGJJL"
								:background="true" layout="total, sizes, prev, pager, next, jumper" :total="totalGJJL"
								style="height: 60px;padding-top: 20px;text-align: right;">
							</el-pagination>
						</div>
					</el-tab-pane>

				</el-tabs>
			</div>
		</el-dialog>
	</div>
</template>

<script>
//添加高德地图密钥

import * as echarts from 'echarts';
import subiconEnter from "@/assets/icons/hezuo/enter1-32.png";

import {
	getRegionVehicleRecords
} from '@/api/hzMJPT/mainInterface.js';
export default {

	props: {
		tabsDialogParams: {
			type: Object,
			default: null
		}
	},
	data() {
		return {
			//企业详情弹窗
			regionId:undefined,
			dialogTitle: "企业详情",
			dialogVisible: false,
			currTab: "1",
			//地图相关
			subMap: null,
			submarkers: [],
			subMainCenter: [117.390225, 39.396636],
			subCurrMarker: null,
			subCurrPolygon: null,
			hasMore5video: false,
			hasless5video: true,
			videoImage: require('@/assets/image/video1-128.png'),
			//车辆台账
			loadingCLTZ: false,
			totalCLTZ: 0,
			pageNumCLTZ: 1,
			pageSizeCLTZ: 10,
			dataTableListCLTZ: [],
			//进场记录
			loadingJCJL: false,
			totalJCJL: 0,
			pageNumJCJL: 1,
			pageSizeJCJL: 10,
			dataTableListJCJL: [
				// { id: 1, name: "XXX货车", company: "公司1" },
				// { id: 2, name: "XXX货车", company: "公司2" },
				// { id: 3, name: "XXX货车", company: "公司3" },
				// { id: 4, name: "XXX货车", company: "公司4" },
				// { id: 5, name: "XXX货车", company: "公司5" },
				// { id: 6, name: "XXX货车", company: "公司6" },
				// { id: 7, name: "XXX货车", company: "公司7" },
				// { id: 8, name: "XXX货车", company: "公司8" },
				// { id: 9, name: "XXX货车", company: "公司9" },
				// { id: 10, name: "XXX货车", company: "公司10" }

			],
			//告警记录
			loadingGJJL: false,
			totalGJJL: 0,
			pageNumGJJL: 1,
			pageSizeGJJL: 3,
			dataTableListGJJL: [],
			//统计分析
			subCentusTime: '',
			dateRangeBarChart: null,
			subStageDataChart: null,
			warningTypeChart: null,
			totalReport: 9999.99,
			totalReportPer: 99.99,
			currReport: 9999,
			currReportPer: 99.99,
			requirePer: 90.00,
			realPer: 98.88,
			isOK: true,
			alertImage: require('@/assets/image/alert1-32.png'),
		}
	},
	mounted() {
		window.dialog = this;
		//this.onOpened();
	},
	beforeDestroy() {
    this.dataTableListJCJL=[]
  },
	methods: {
		changeTab(e) {
			if (e.name == "1") {

			}
			else if (e.name == "2") {
				//初始化起止时间
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				this.subCentusTime = [start, end];
				setTimeout(() => {
					this.setSubCentusData();
				}, 100)

			}
			else if (e.name == "3") {

			}
		},

		//根据屏幕大小自动计算Echart图标内字体大小
		autoFontSize(res) {
			let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			if (!clientWidth) return;
			let fontSize = 100 * (clientWidth / 1920);
			return res * fontSize;
		},

		onOpened() {
			window.dialog = this;
			this.regionId = this.tabsDialogParams.objItem;
			if(this.currTab = "1"){
				getRegionVehicleRecords({regionId:this.regionId})
				.then((res)=> {
					let data = res.data
					this.dataTableListJCJL=data
				})
			}else if(this.currTab=="2"){

			}else if(this.currTab=="3"){


			}
			
		},
		initMap() {
			AMapLoader.load({
				key: '327759cbeffa99a7b771d37f4ee42307',  //设置您的key
				version: "1.4.15",
				plugins: [],
				AMapUI: {
					version: "1.1",
					plugins: []
				},
				Loca: {
					version: "1.3.2"
				},
				//callback: window.mapVue.loadMapCallback(),
			}).then((AMap) => {
				//地图图层
				var subMap = new AMap.Map("detailMap", {
					viewMode: "2D",
					//zoom:this.autoFontSize(0.04),
					zoom: 15,
					zooms: [2, 22],
					center: this.subMainCenter,  //天津
					//center: [104.925825,36.695811],   //中国
					resizeEnable: true,
					//pitch: 45,
					//mapStyle: 'amap://styles/blue',
					//mapStyle: 'amap://styles/darkblue',
					//mapStyle: 'amap://styles/grey',
					//features: ["bg","road","building"]
				});
				//添加控制器
				//var districtSearch = null;
				//var disProvince = null;
				//此方式为异步加载插件，需要在插件加载完后进行插件的使用
				AMap.plugin([
					'AMap.MapType',
					'AMap.ControlBar',
					'AMap.TileLayer.Traffic',
					'AMap.TileLayer.Satellite',
					'AMap.TileLayer.RoadNet',
					'AMap.ToolBar',
					'AMap.Scale',
					'AMap.OverView',
					'AMap.Geolocation',
					'AMap.DistrictSearch',
					'AMap.DistrictLayer',
				], function () {
					// 添加 3D 罗盘控制
					/*
					var ControlBar = new AMap.ControlBar({
						position: {
							top: '10px',
							left: '100px'
						}
					});
					*/
					//map.addControl(ControlBar);
					/*
					var layers = [
						new AMap.TileLayer.Satellite()
					];
					map.setLayers(layers);
					*/
					/*
					// 添加图层选择
					var MapType = new AMap.MapType({
						
					});
					subMap.addControl(MapType);
					//MapType.hide();
					*/
					subMap.on('complete', function () {
						window.dialog.subMap = subMap;
						//alert(window.dialog.dialogTitle);
						setTimeout(() => {
							window.dialog.openEFsub();
						}, 100)

					});
					/*
					map.on('click',function(){
						
					});
					*/
				});
			}).catch(e => {
				alert(e);
			})
		},
		//地图显示单个站点围栏信息
		openEFsub() {
			this.submarkers = [];
			//alert(this.subCurrMarker.comName);
			this.subMap.setZoomAndCenter(18, this.subCurrMarker.centerPoint);
			this.subCurrPolygon = null;
			//var data = this.subCurrMarker;
			this.subCurrPolygon = new AMap.Polygon({
				map: window.dialog.subMap,
				path: window.dialog.subCurrMarker.ElectronicFence,
				strokeColor: "#00ffff",
				strokeWeight: 2,
				strokeOpacity: 0.8,
				fillColor: '#27a8bc',
				fillOpacity: 0.6,
				zIndex: 50,
				bubble: true,
				/*
				extData: {
					id: data.id,
					name: data.name,
					company: data.company,
					principalName: data.principalName,
					principalPhone: data.principalPhone,
					memo: data.memo,
				},
				*/
			});
			/*
			polygon.on('click',function(event){
				window.mapVue.subCurrPolygon = polygon;
				window.mapVue.openInfoWindow(event);
			});
			*/
			var subCurrEnterList = this.subCurrMarker.enterList;
			for (var i = 0; i < subCurrEnterList.length; i++) {
				//var subLngLat = new AMap.LngLat(subCurrEnterList[i].longitude,subCurrEnterList[i].latitude);
				var marker = new AMap.Marker({
					icon: subiconEnter,
					position: subCurrEnterList[i].enterPoint, //此处更换为进出点
					//extData: subCurrEnterList[i],
					label: {
						content: subCurrEnterList[i].enterName,
						direction: 'bottom',
					}

				});
				this.submarkers.push(marker);
				this.subMap.add(this.submarkers);
			}
		},
		dialogClose(done) {
			this.dataTableListJCJL=[]
			this.dialogVisible = false;
			done();
		},
		//车辆台账
		getListCLTZ() {
			this.dataTableListCLTZ = [
				{

				}
			]
		},
		handleQuery() {
			this.pageNumCLTZ = 1;
			this.getListCLTZ();
		},
		handleSizeChangeCLTZ(val) {
			this.pageNumCLTZ = 1;
			this.pageSizeCLTZ = val;
			this.getListCLTZ();
		},
		handleCurrentChangeCLTZ(val) {
			this.pageNumCLTZ = val;
			this.getListCLTZ();
		},
		//进场记录
	
		handleQuery() {
			this.pageNumJCJL = 1;
			this.getListJCJL();
		},
		handleSizeChangeJCJL(val) {
			this.pageNumJCJL = 1;
			this.pageSizeJCJL = val;
			this.getListJCJL();
		},
		handleCurrentChangeJCJL(val) {
			this.pageNumJCJL = val;
			this.getListJCJL();
		},
		//告警记录
		getListGJJL() {
			this.dataTableListGJJL = [
				{

				}
			]
		},
		handleQuery() {
			this.pageNumGJJL = 1;
			this.getListGJJL();
		},
		handleSizeChangeGJJL(val) {
			this.pageNumGJJL = 1;
			this.pageSizeGJJL = val;
			this.getListGJJL();
		},
		handleCurrentChangeGJJL(val) {
			this.pageNumGJJL = val;
			this.getListGJJL();
		},
		//统计分析
		//加载统计分析数据
		setSubCentusData() {
			if (this.realPer < this.requirePer) {
				this.isOK = false;
			}
			this.setDateRangeBar();
			this.setSubStageData();
			this.setWarningTypeData();
		},
		setDateRangeBar() {
			/*
			getCensusCustomer().then(res => {
				var dataList = res.data;
				var nameArray = [];
				var dataArray = [];
				for (var i=0; i<dataList.length; i++)
				{
					nameArray.push(dataList[i].name);
					dataArray.push(dataList[i].value1);
				}
				this.drawAreaInlineChart(nameArray,dataArray);
			}).catch(error => {
			
			});
			*/
			var nameArray = ["12-01", "12-02", "12-03", "12-04", "12-05", "12-06", "12-07", "12-08", "12-09", "12-10", "12-11", "12-12", "12-13", "12-14", "12-15", "12-16", "12-17", "12-18", "12-19", "12-20", "12-21", "12-22", "12-23", "12-24", "12-25", "12-26", "12-27", "12-28", "12-29", "12-30", "12-31", "01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "12-01", "12-02", "12-03", "12-04", "12-05", "12-06", "12-07", "12-08", "12-09", "12-10", "12-11", "12-12", "12-13", "12-14", "12-15", "12-16", "12-17", "12-18", "12-19", "12-20", "12-21", "12-22", "12-23", "12-24", "12-25", "12-26", "12-27", "12-28", "12-29", "12-30", "12-31", "01-01", "01-02", "01-03", "01-04", "01-05", "01-06"];
			var dataArray = [120, 168, 145, 108, 178, 158, 130, 96, 90, 68, 120, 168, 145, 108, 178, 158, 130, 96, 90, 68, 120, 168, 145, 108, 178, 158, 130, 96, 90, 68, 108, 178, 158, 130, 96, 90, 68, 120, 168, 145, 108, 178, 158, 130, 96, 90, 68, 120, 168, 145, 108, 178, 158, 130, 96, 90, 68, 120, 168, 145, 108, 178, 158, 130, 96, 90, 68, 108, 178, 158, 130, 96, 90, 680];
			var lineDataArray = [100, 100, 98.62, 100, 96, 100, 88, 96.88, 90, 100, 100, 100, 98.62, 100, 96, 100, 88, 96.88, 90, 100, 100, 100, 98.62, 100, 96, 100, 88, 96.88, 90, 100, 100, 98.62, 100, 96, 100, 88, 96.88, 100, 100, 98.62, 100, 96, 100, 88, 96.88, 90, 100, 100, 100, 98.62, 100, 96, 100, 88, 96.88, 90, 100, 100, 100, 98.62, 100, 96, 100, 88, 96.88, 90, 100, 100, 98.62, 100, 96, 100, 88, 96.88];
			this.drawDateRangeBarChart(nameArray, dataArray, lineDataArray);
		},
		drawDateRangeBarChart(nameArray, dataArray, lineDataArray) {
			if (this.dateRangeBarChart != null && this.dateRangeBarChart != "" && this.dateRangeBarChart != undefined) {
				this.dateRangeBarChart.dispose();
			};
			this.dateRangeBarChart = echarts.init(document.getElementById('dateRangeBarDiv'));
			this.dateRangeBarChart.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						//type: 'shadow'
					},
					backgroundColor: 'rgba(30, 54, 124,0.8)',
					borderWidth: '2',
					borderRadius: '5',
					borderColor: 'rgba(30, 159, 255,0.5)',
					textStyle: {
						color: '#ffffff'
					},
					formatter: function (params) {
						//return params[0].name + "：" + params[0].value + "";
						return params[0].name + '</br >上报数：' + params[0].value + '</br >上报率：' + params[1].value + '%';
					}

				},
				grid: {
					top: '20%',
					left: '5%',
					right: '5%',
					bottom: '35%',
					zlevel: 1
				},
				dataZoom: [
					{
						show: true,
						startValue: 0,
						endValue: 30,
						height: 20,
						bottom: '18%',
					},
					/*
					{
					  type: 'inside',
					  start: 0,
					  end: 30
					},
					{
					  show: false,
					  yAxisIndex: 0,
					  filterMode: 'empty',
					  width: 30,
					  height: '60%',
					  showDataShadow: false,
					  left: '1%'
					}
					*/
				],
				xAxis: [
					{
						type: 'category',
						data: nameArray,
						axisLine: {
							lineStyle: {
								color: '#00aaff'
							}
						},
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 30,
							color: '#00ffff',
							fontSize: this.autoFontSize(0.12),
						},
						splitLine: {
							lineStyle: {
								color: '#436ed0'
							}
						}
					},
				],
				yAxis:
					[
						{
							type: 'value',
							name: '上报数',
							position: 'left',
							alignTicks: true,
							nameTextStyle: {
								fontSize: this.autoFontSize(0.12),
							},
							//minInterval: 1,
							axisLine: {
								show: true,
								lineStyle: {
									color: '#00aaff'
								}
							},
							axisLabel: {
								show: true,
								color: '#00aaff',
								fontSize: this.autoFontSize(0.12),
								formatter: function (value, index) {
									return value;
								}
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: '#436ed0',
									opacity: 0.1
								}
							}
						},
						{
							type: 'value',
							name: '上报率',
							position: 'right',
							alignTicks: true,
							nameTextStyle: {
								fontSize: this.autoFontSize(0.12),
							},
							//minInterval: 1,
							axisLine: {
								show: true,
								lineStyle: {
									color: '#ffaa00'
								}
							},
							axisLabel: {
								show: true,
								color: '#ffaa00',
								fontSize: this.autoFontSize(0.12),
								formatter: function (value, index) {
									return value + " %";
								}
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: '#436ed0',
									opacity: 0.1
								}
							},
						}
					],
				series:
					[
						{
							//data: [120, 20, 150, 80, 70, 110, 130],
							name: '上报数',
							data: dataArray,
							type: 'bar',
							barWidth: this.autoFontSize(0.15),
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{ offset: 0, color: 'rgba(0, 170, 255, 1.0)' },                   //柱图渐变色
										{ offset: 0.5, color: 'rgba(0, 170, 255, 0.8)' },                   //柱图渐变色
										{ offset: 1, color: 'rgba(0, 170, 255, 0.5)' },                   //柱图渐变色
									]
								),
								borderRadius: [0, 0, 0, 0]
							},
						},
						{
							name: '上报率',
							data: lineDataArray,
							type: 'line',
							yAxisIndex: 1,
							itemStyle: {
								color: "#ffaa00"
							}
						}
					]

			});
		},
		setSubStageData() {
			/*
			getAreaData().then(res => {
				var dataList = res.data;
				var nameArray = [];
				var dataArray = [];
				for (var i=0; i<dataList.length; i++)
				{
					nameArray.push(dataList[i].name);
					dataArray.push(dataList[i].value1);
				}
				this.drawAreaDataChart(nameArray,dataArray);
			}).catch(error => {
			
			});
			*/
			var totalCount = 550;
			var dataSource = [{ "id": "0", "name": "新能源", "value": 128 }, { "id": "1", "name": "国六", "value": 96 }, { "id": "2", "name": "国五", "value": 168 }, { "id": "3", "name": "国四", "value": 158 }, { "id": "4", "name": "国三", "value": 128 }, { "id": "6", "name": "其他", "value": 168 }];
			this.drawSubStageDataChart(totalCount, dataSource);
		},
		drawSubStageDataChart(totalCount, dataSource) {
			if (this.subStageDataChart != null && this.subStageDataChart != "" && this.subStageDataChart != undefined) {
				this.subStageDataChart.dispose();
			};
			this.subStageDataChart = echarts.init(document.getElementById('subStageDataDiv'));
			this.subStageDataChart.setOption({
				legend: {
					show: false,
					top: '10%',
					left: '10%',
					orient: 'vertical',
					itemGap: 15,
					textStyle: {
						color: '#ffffff'
					},
					formatter(name) {
						var curVlaue = 0;
						for (var i = 0; i < dataSource.length; i++) {
							if (dataSource[i].name == name) {
								curVlaue = dataSource[i].value;
							}
						}
						return name + " " + curVlaue + "家";
					}
				},
				grid: {
					top: '10%',
					left: '10%',
					right: '5%',
					bottom: '5%',
					zlevel: 1
				},
				title: {
					text: "车辆构成分布",
					left: 'center',
					textStyle: {
						color: '#ffaa00',
						fontWeight: 'normal',
						fontSize: this.autoFontSize(0.15)
					},
					//backgroundColor: '#4367ba'
					//backgroundColor: '-webkit-linear-gradient(left,#071f56,#4367ba,#071f56)',
				},
				series: [
					{
						name: '排放阶段',
						type: 'pie',
						roseType: false,
						//left: '30%',
						radius: ['30%', '75%'],
						itemStyle: {
							borderRadius: 5,
							//borderColor: '#436ed0',
							borderWidth: 0
						},
						label: {
							show: true,
							position: 'outside',
							fontSize: this.autoFontSize(0.12),
							color: '#ffaa00',
							formatter: function (params) {
								var percent = 0;
								if ((totalCount > 0) && (params.data.value > 0)) {
									percent = Math.round(params.data.value / totalCount * 100);
								}
								return params.data.name + ": " + params.data.value + " 辆，占比 " + percent + '%';
							}
						},
						labelLine: {
							show: true,
							showAbove: false,
							length: 15,
							length2: 15
						},
						emphasis: {
							label: {
								show: true,
								fontSize: this.autoFontSize(0.15),
								color: '#00ffff'
							}
						},
						data: dataSource
					}
				]
			});
		},
		setWarningTypeData() {
			/*
			getAreaData().then(res => {
				var dataList = res.data;
				var nameArray = [];
				var dataArray = [];
				for (var i=0; i<dataList.length; i++)
				{
					nameArray.push(dataList[i].name);
					dataArray.push(dataList[i].value1);
				}
				this.drawAreaDataChart(nameArray,dataArray);
			}).catch(error => {
			
			});
			*/
			var totalCount = 550;
			var dataSource = [{ "id": "0", "name": "违规使用车辆", "value": 128 }, { "id": "1", "name": "数据不规范", "value": 96 }, { "id": "2", "name": "数据异常", "value": 168 }, { "id": "3", "name": "其他", "value": 158 }];
			this.drawWarningTypeChart(totalCount, dataSource);
		},
		drawWarningTypeChart(totalCount, dataSource) {
			if (this.warningTypeChart != null && this.warningTypeChart != "" && this.warningTypeChart != undefined) {
				this.warningTypeChart.dispose();
			};
			this.warningTypeChart = echarts.init(document.getElementById('warningTypeDiv'));
			this.warningTypeChart.setOption({
				legend: {
					show: false,
					top: '10%',
					left: '10%',
					orient: 'vertical',
					itemGap: 15,
					textStyle: {
						color: '#ffffff'
					},
					formatter(name) {
						var curVlaue = 0;
						for (var i = 0; i < dataSource.length; i++) {
							if (dataSource[i].name == name) {
								curVlaue = dataSource[i].value;
							}
						}
						return name + " " + curVlaue + "家";
					}
				},
				grid: {
					top: '5%',
					left: '10%',
					right: '5%',
					bottom: '5%',
					zlevel: 1
				},
				title: {
					text: "告警类型分布",
					left: 'center',
					textStyle: {
						color: '#ffaa00',
						fontWeight: 'normal',
						fontSize: this.autoFontSize(0.15)
					},
					//backgroundColor: '#4367ba'
					//backgroundColor: '-webkit-linear-gradient(left,#071f56,#4367ba,#071f56)',
				},
				series: [
					{
						name: '告警类型',
						type: 'pie',
						roseType: false,
						//left: '30%',
						radius: ['30%', '75%'],
						itemStyle: {
							borderRadius: 5,
							//borderColor: '#436ed0',
							borderWidth: 0
						},
						label: {
							show: true,
							position: 'outside',
							fontSize: this.autoFontSize(0.12),
							color: '#ffaa00',
							formatter: function (params) {
								var percent = 0;
								if ((totalCount > 0) && (params.data.value > 0)) {
									percent = Math.round(params.data.value / totalCount * 100);
								}
								return params.data.name + ": " + params.data.value + " 次，占比： " + percent + '%';
							}
						},
						labelLine: {
							show: true,
							showAbove: false,
							length: 15,
							length2: 15
						},
						emphasis: {
							label: {
								show: true,
								fontSize: this.autoFontSize(0.15),
								color: '#00ffff'
							}
						},
						data: dataSource
					}
				]
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.mydialog {
	::v-deep .tabPanelDiv {
		width: 100%;
		height: 70vh;
		display: flex;
		flex-direction: column;
	}

	/* detailLine 样式 */
	::v-deep .detailLine {
		width: 100%;
		height: 2vw;
		display: flex;
	}

	/* detailBlock 样式 */
	::v-deep .detailBlock {
		width: auto;
		height: 100%;
		padding-left: 0vw;
		display: table;
	}

	/* detailBlockText 样式 */
	::v-deep .detailBlockText {
		width: auto;
		height: 100%;
		display: table-cell;
		vertical-align: middle;
	}

	/* detailBlockTextTitle 样式 */
	::v-deep .detailBlockTextTitle {
		display: inline-block;
		width: 5vw;
		text-align: right;
		color: #00e5e5;
	}

	/* detailBlockTextDesc 样式 */
	::v-deep .detailBlockTextDesc {
		display: inline-block;
		width: 7vw;
		color: #ffaa00;
	}

	/* 宽度相关样式 */
	::v-deep .width85 {
		width: 85%;
	}

	::v-deep .width70 {
		width: 70%;
	}

	::v-deep .width15 {
		width: 15%;
	}

	::v-deep .width0 {
		width: 0%;
	}

	/* el-dialog 整体样式 */
	::v-deep .el-dialog {
		background: rgba(0, 0, 0, 0.2) !important;
		border: 1px solid rgb(8, 255, 243);
		backdrop-filter: blur(3px);
	}

	/* el-dialog 标题样式 */
	::v-deep .el-dialog__title {
		color: rgb(255, 255, 255);
		font-weight: 900;
	}

	/* el-dialog 头部样式 */
	::v-deep .el-dialog__header {
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
		text-align: center;
		box-shadow: 0 0 1.5vw rgb(97, 255, 255) inset;
		background:
			linear-gradient(#74ffef, #74ffef) left top,
			linear-gradient(#3deeda, #3deeda) left top,
			linear-gradient(#3deeda, #3deeda) right top,
			linear-gradient(#3deeda, #3deeda) right top;
		background-repeat: no-repeat;
		background-size: 2px 20px, 20px 2px;
	}

	/* el-dialog 主体样式 */
	::v-deep .el-dialog__body {
		padding: 20px;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
		text-align: left;
		box-shadow: 0 0 1.5vw rgb(57, 255, 255) inset;
		background:
			linear-gradient(#3deeda, #3deeda) left bottom,
			linear-gradient(#3deeda, #3deeda) left bottom,
			linear-gradient(#3deeda, #3deeda) right bottom,
			linear-gradient(#3deeda, #3deeda) right bottom;
		background-repeat: no-repeat;
		background-size: 2px 20px, 20px 2px;
	}

	/* el-form-item 内容样式 */
	::v-deep .el-form-item__content {
		background-color: rga(0, 0, 0, 0.1);
		box-shadow: 0 0 0.5vw rgb(57, 255, 255);
		background-repeat: no-repeat;
		border-radius: 10px;
	}

	/* 计划标题样式 */
	::v-deep .planTitle {
		padding: 0 0 0 20px;
		color: #8ae3e9;
		font-size: 18px;
		font-weight: 600;
	}

	/* el-tabs 标签项样式 */
	::v-deep .el-tabs__item {
		color: #e6feff;
	}

	/* 计划内容样式 */
	::v-deep .planContent {
		color: #e6feff;
		font-size: 16px;
	}

	/* 主要按钮样式 */
	::v-deep .el-button--primary {
		color: #FFF !important;
		background-color: #415b5ec2 !important;
		border-color: #75fbe9 !important;
		position: absolute;
	}
	::v-deep .el-table {
		background-color: #090f1a;
		opacity: 0.8;
	}

	.el-input {
		background-color: #090f1a;
		opacity: 0.8;
	}

	::v-deep .el-table th {
		overflow: hidden;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background-color: #062756;
	}

	::v-deep .el-table th.is-leaf,
	.el-table td {
		border-bottom: 1px solid #1E7EF4;
	}

	::v-deep .el-table tbody tr>td {
		background-color: #090f1a !important;
	}

	::v-deep .el-table tbody tr:hover>td {
		background-color: #365795 !important;
		color: #00ffff;
	}

	::v-deep .el-table__body-wrapper::-webkit-scrollbar {
		/*width: 0;宽度为0隐藏*/
		width: 3px;
	}

	::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
		border-radius: 2px;
		height: 50px;
		background-color: #55aaff;
	}

	::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 0px;
		background-color: rgba(9, 15, 26, 0.8);
	}
}
</style>